$animationTime: .2s;
$animationType: linear;
$ratio: 375 / 10;

@function px2rem($px) {
  @return $px / $ratio + rem;
}

@mixin scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}

@mixin leftBottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

@mixin absCenter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@mixin top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@mixin right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@mixin columnTop {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

@mixin columnLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@mixin columnCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@mixin ellipsis2($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.icon {
  color: #666;
  font-size: px2rem(16);
}

.title {
  color: #666;
  font-size: px2rem(16);
  font-weight: bold;
}
